<template>
  <div class="Home">
    <div class="left"></div>
    <div class="right">
      <div class="top">
        <Select v-model="themeId" @on-change="changeSkin">
          <Option
            v-for="(item, index) in themeList"
            :value="item"
            :key="index"
            >{{ item }}</Option
          >
        </Select>
      </div>
      <div class="content"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      // 选中的主题
      themeId: "",
      // 主题数据
      themeList: ["blue", "red", "yellow", "green"],
    };
  },
  mounted() {
    if (localStorage.getItem("theme")) {
      this.themeId = localStorage.getItem("theme");
    } else {
      this.themeId = "blue";
    }
  },
  methods: {
    // 换肤
    changeSkin(mode) {
      if (!mode) {
        window.document.documentElement.setAttribute("data-theme", "blue");
        localStorage.setItem("theme", "blue");
      } else {
        window.document.documentElement.setAttribute("data-theme", mode);
        localStorage.setItem("theme", mode);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.Home {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    width: 200px;
    margin-right: 5px;
    @include home_background_color(); // 这里是引用混入函数
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    .top {
      width: 100%;
      height: 100px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      @include home_background_color(); // 这里是引用混入函数
      .ivu-select {
        width: 200px;
      }
    }
    .content {
      width: 100%;
      flex: 1;
      @include home_background_color(); // 这里是引用混入函数
    }
  }
}
</style>
